<template>
  <div class="information-box-li">
    <div class="account-container">
      <span>{{ "FIRST NAME" }}</span>
      <div>
        <input v-model="info.first_name" type="text" />
        <p v-show="firstShow">{{ "This is a required field." }}</p>
      </div>
      <span>{{ "LAST NAME" }}</span>
      <div>
        <input v-model="info.last_name" type="text" />
        <p v-show="lastShow">{{ "This is a required field." }}</p>
      </div>
      <span>EMAIL</span>
      <div>
        <input v-model="info.email" type="text" />
        <p v-show="emailShow">{{ "This is a required field." }}</p>
      </div>
      <span>CURRENT PASSWROD</span>
      <div>
        <input v-model="info.current_password" type="password" />
      </div>
      <span>NEW PASSWORD</span>
      <div>
        <input v-model="info.password" type="password" />
        <p class="tips">{{ "Password Strength: No Password" }}</p>
        <p v-show="passwordShow">{{ "This is a required field." }}</p>
      </div>
      <span>CONFIRM NEW PASSWROD</span>
      <div>
        <input v-model="info.confirm_password" type="password" />
        <p v-show="confirmShow">{{ "This is a required field." }}</p>
      </div>
      <p class="tips">
        If you created this account using Amazon Pay, you might not know your
        site password.
        <br />
        In order to reset your password, please Sign Out and click on “Forgot
        Your Password?” from the Sign In page
      </p>
      <div class="btn" @click="submit">
        {{ "Save" }}
      </div>
    </div>
  </div>
</template>

<script>
import { customersPassword } from '@/api/user'
export default {
  name: "",
  props: [""],
  data() {
    return {
      info: {},
			firstShow: false,
			lastShow: false,
			emailShow: false,
			passwordShow: false,
			confirmShow: false,

    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    submit() {
			let params = {
				"currentPassword": 'Csm69751211',
				"newPassword": 'Csm1123456',
			}
			customersPassword(params).then(res => {
				console.log(res);
			})
		}
  },

  watch: {}
};
</script>
<style lang="scss" scoped>
.information-box-li {
  .account-container {
    margin: 0 auto 40px;
    span {
      font-size: 12px;
      color: #969696;
      &::after {
        content: "*";
        padding-left: 2px;
        color: #969696;
        font-size: 12px;
        margin: 0 0 0 5px;
      }
    }
    input {
      width: 100%;
      height: 30px;
      border: 0;
      border-bottom: 1px solid #e2e2e2;
      margin-bottom: 10px;
      outline: 0;
      font-size: 14px;
      color: #000;
      padding: 5px 0;
      border-radius: 5px;
      &:focus {
        border-bottom-color: #1a1a1a;
      }
    }
    p {
      font-size: 12px;
      color: #e02b27;
      margin: 0;
      &.tips {
        color: #1a1a1a;
        font-size: 14px;
        margin-bottom: 10px;
				line-height: 25px;
      }
    }
    & > div {
      margin-bottom: 29px;
    }
    p.forget-text {
      color: #000;
      text-align: center;
      cursor: pointer;
    }
    div.btn {
      width: 100%;
      height: 50px;
      line-height: 50px;
      background: #000;
      border-color: #000;
      color: #fff;
      font-weight: 500;
      text-align: center;
      cursor: pointer;
      margin-bottom: 15px;
    }
  }
}
</style>
